<template>
  <van-icon
    class-prefix="iconfont icondianzan2"
    name="extra"
    :color="value === 1 ? 'yellow' : ''"
    @click="likesClick"
  />
</template>

<script>
import { likeArticle, deleteLikeArticle } from '@/api/article'

export default {
  name: 'Likes',
  components: {},
  props: {
    value: {
      type: [Number, String],
      required: true
    },
    artId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    async likesClick() {
      try {
        if (this.value === 1) {
          // 已点赞,取消点赞
          await deleteLikeArticle(this.artId)
          this.$emit('input', -1)
        } else {
          // 未点赞,点击点赞
          await likeArticle(this.artId)
          this.$emit('input', 1)
        }
        //  console.log(this.value)

        // 改变value数据不是即时的
        this.$toast.success(this.value === 1 ? '取消点赞' : '点赞成功')
      } catch (error) {
        this.$toast.fail('更改点赞状态失败,请稍后重试!')
      }
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped></style>
